<template>
  <h2>电影详情</h2>
  <RouterLink to="/film/6681">猜你喜欢 海王2 - 失落的王国</RouterLink>

  <template v-if="info">
    <p>{{ info.name }}</p>
    <img style="width: 300px" :src="info.poster" alt="" />
  </template>

  <template v-else>
    <div>加载中...</div>
  </template>
</template>

<script>
export default {
  name: "FilmInfo",

  data() {
    return {
      info: null, // 用于存放接口返回的详情
    };
  },

  // watch: {
  //   "$route.params.id"(newVal) {
  //     console.log("newVal", newVal);

  //     this.refresh();
  //   },
  // },

  methods: {
    refresh(id) {
      // 1. 获取参数
      const filmId = id || this.$route.params.id;
      // 2. 拼接请求地址
      const url = `https://m.maizuo.com/gateway?filmId=${filmId}&k=1957291`;
      fetch(url, {
        headers: {
          "X-Host": "mall.film-ticket.film.info",
        },
      })
        .then((response) => response.json())
        .then((result) => {
          // console.log("result", result);

          if (result.status !== 0) {
            alert(result.msg);
            return;
          }

          this.info = result.data.film;
        });
    },
  },

  created() {
    this.refresh();
  },

  beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate", to, from);
    // 重新获取数据
    this.refresh(to.params.id);
    // 放行
    next();
  },
};
</script>
